<template>
  <div>
    <!-- 导航区 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="'歌曲列表(' + musicList.length + ')'" name="first">
        <!-- 音乐表格 -->
        <SongTable :songList="musicList" :dataType="0"></SongTable>
      </el-tab-pane>
      <!-- 评论列表 -->
      <el-tab-pane :label="'评论(' + newComments.total + ')'" name="second">
        <el-tabs v-model="activeNameSon" @tab-click="handleClickSon">
          <el-tab-pane
            :label="'热门(' + hotComments.total + ')'"
            name="second-first"
          >
            <CommentList :commentList="hotComments.comments"></CommentList>
            <div class="btn" v-show="isLoading && !noMoreHot">加载中...</div>
            <div class="btn" v-show="noMoreHot">没有更多了</div>
          </el-tab-pane>
          <el-tab-pane
            :label="'最新(' + newComments.total + ')'"
            name="second-second"
          >
            <CommentList :commentList="newComments.comments"></CommentList>
            <div class="btn" v-show="isLoading && !noMoreNew">加载中...</div>
            <div class="btn" v-show="noMoreNew">没有更多了</div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { reqCommentHot, reqCommentNew } from '@/api/songMenu'
import CommentList from '@/components/CommentList.vue'
import SongTable from '@/components/SongTable.vue'
import { mapMutations } from 'vuex'
export default {
  components: {
    CommentList,
    SongTable
  },
  props: {
    // 音乐列表
    musicList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // 选中的 tab 栏
      activeName: 'first',
      activeNameSon: 'second-first',
      // 请求参数
      paramsHot: {
        id: 0,
        type: 2,
        limit: 20,
        offset: 0
      },
      paramsNew: {
        id: 0,
        type: 2,
        limit: 20,
        offset: 0
      },
      // 热门歌曲
      hotComments: {
        comments: [],
        total: 0
      },
      // 最新歌曲
      newComments: {
        comments: [],
        total: 0
      },
      // 数据加载中
      isLoading: false,
      // 没有更多数据
      noMoreNew: false,
      noMoreHot: false
    }
  },
  created() {
    // 该标志为 true 时,才会触发加载更多事件
    this.updateLoadComment(true)
    // 监听加载更多事件
    this.$bus.$on('loadComment', this.showMore)
    this.getCommentNew()
    this.getCommentHot()
  },
  methods: {
    ...mapMutations('user', ['updateLoadComment']),
    // 监听 tab栏 的点击
    handleClick(e) {
      this.activeName = e.name
    },
    // 监听 tab子栏 的切换
    handleClickSon(e) {
      this.activeNameSon = e.name
    },
    // 获取最新评论评论
    async getCommentNew() {
      // 如果没有更多数据就不再发送请求
      if (this.noMoreNew) return
      this.isLoading = true
      this.paramsNew.id = window.sessionStorage.getItem('id')
      // 请求数据
      const { data: newComment } = await reqCommentNew(this.paramsNew)
      this.newComments.total = newComment.total
      // 连接新旧数据
      this.newComments.comments = [
        ...this.newComments.comments,
        ...newComment.comments
      ]
      // 如果最新数据的长度 < 20 ,则没有更多评论
      if (newComment.comments.length < 20) this.noMoreNew = true
      this.isLoading = false
    },
    // 获取热门评论
    async getCommentHot() {
      // 如果没有更多数据就不再发送请求
      if (this.noMoreHot) return
      this.isLoading = true
      this.paramsHot.id = window.sessionStorage.getItem('id')
      // 请求数据
      const { data: hotComment } = await reqCommentHot(this.paramsHot)
      this.hotComments.total = hotComment.total
      // 连接新旧数据
      this.hotComments.comments = [
        ...this.hotComments.comments,
        ...hotComment.hotComments
      ]
      // 如果新数据的长度 < 20 ,则没有更多评论
      if (hotComment.hotComments.length < 20) this.noMoreHot = true
      this.isLoading = false
    },
    // 显示更多最新评论
    showMore() {
      // 选中特定的栏目时才会调用特点的方法 ！！！
      if (this.activeNameSon === 'second-first') {
        this.paramsHot.offset += 20
        this.getCommentHot()
      } else {
        this.paramsNew.offset += 20
        this.getCommentNew()
      }
    }
  },
  beforeDestroy() {
    // 销毁前重置 isLoadComment
    this.updateLoadComment(false)
    this.$bus.$off('loadComment')
  },
  filters: {
    // 格式化播放时间
    formatDuration(duration) {
      // 分钟：向下取整，转为字符，不足两位前边补零
      const minute = Math.floor(duration / 1000 / 60)
        .toString()
        .padStart(2, '0')
      const second = Math.floor(duration % 60)
        .toString()
        .padStart(2, '0')
      return minute + ':' + second
    }
  }
}
</script>

<style lang="less" scoped>
img {
  width: 120px;
  cursor: pointer;
}

.btn {
  margin: 0 auto;
  background: #fff;
  border-radius: 15px;
  padding: 5px 10px;
  cursor: pointer;
  width: 80px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #cfd4db;
}

.btn:hover {
  color: red;
}
</style>
